<template>
  <div>
    <el-form :inline="true" :rules="rules" class="bg-bg_color w-[99/100] pl-4 pt-4" ref="froms" :model="SearchFrom">
      <el-form-item label="案例类别" prop="menuId">
        <el-select style="width: 160px" placeholder="请选择" v-model="SearchFrom.menuId" value-key="id" filterable
          @change="seleteCaseType">
          <el-option v-for="it in formList.CaseType" :key="it.id" :label="it.displayName" :value="it" />
        </el-select>
      </el-form-item>
      <el-form-item label="案例名称" prop="parentMenuName">
        <el-select style="width: 160px" placeholder="请选择" value-key="id" v-model="SearchFrom.parentMenuName" filterable
          clearable>
          <el-option v-for="it in formList.CaseName" :key="it.id" :label="it.displayName" :value="it" />
        </el-select>
      </el-form-item>
      <el-form-item label="班级名称" prop="classId">
        <el-select style="width: 160px" placeholder="请选择" value-key="key" v-model="SearchFrom.classId" filterable
          @change="GetPlanList">
          <el-option v-for="it in formList.ClassList" :key="it.key" :label="it.value" :value="it" />
        </el-select>
      </el-form-item>
      <el-form-item label="计划名称" prop="planId">
        <el-select style="width: 160px" placeholder="请选择" filterable v-model="SearchFrom.planId">
          <el-option v-for="it in formList.PalnList" :key="it.planId" :label="it.planName" :value="it.planId" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="ml-3" type="primary" :icon="useRenderIcon(Search)" @click="onSearch(froms)">
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(froms)">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <PureTableBar class="h100-60">
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" :size="size"
          :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination"
          :paginationSmall="size === 'small' ? true : false" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }" @selection-change="handleSelectionChange(froms)" @size-change="handleSizeChange(froms)"
          @current-change="handleCurrentChange(froms)">
          <template #operation="{ row }">
            <el-button class="reset-margin" link type="warning" :size="size" @click="comment(row)">
              点评
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <!-- 教师评价 loading -->
    <el-dialog v-model="updatePanelVisible" title="教师评价" @close="CloseUpdatePanel(updatePanelVisible)" width="30%" center>
      <el-form ref="updatePanelVisible" label-position="left" label-width="100px" :rules="rules" :model="TeaEvalsForms"
        style="max-width: 460px">
        <el-form-item label="案例分析">
          <el-input v-model="TeaEvalsForms.CaseAnalysis" :rows="5" type="textarea" disabled />
        </el-form-item>
        <el-form-item label="教师点评">
          <el-input v-model="TeaEvalsForms.Comments" maxlength="200" :rows="5" placeholder="请输入评语" show-word-limit
            type="textarea" />
        </el-form-item>
        <el-form-item label="教师评价">
          <el-select v-model="TeaEvalsForms.Evaluation">
            <el-option v-for="item in RatingList" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="updateComment(updatePanelVisible)">保存</el-button>
          <el-button @click="CloseUpdatePanel(updatePanelVisible)">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { PureTableBar } from "@/components/RePureTableBar";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import { useEvaluation } from "./hook";
import AddFill from "@iconify-icons/ri/add-circle-line";
const froms = ref();

const {
  rules,
  TeaEval,
  formList,
  dataList,
  TeaEvalsForms,
  loading,
  columns,
  RatingList,
  SearchFrom,
  pagination,
  updatePanelVisible,
  comment,
  onSearch,
  resetForm,
  GetCaseType,
  GetClassName,
  GetPlanList,
  seleteCaseType,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  CloseUpdatePanel,
  updateComment
} = useEvaluation()
</script>
